<template>
  <!-- 积分商品列表要修改的，抄抽奖页面，我要去测导出的接口-->
  <div class="welMain">
    <div class="searchDiv">
      <el-form :inline="true" :model="formInline" ref="postForm" :rules="rulesInline" class="demo-form-inline"
               size="mini">
        <el-form-item label="商品名称">
          <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="formInline.code" placeholder="请输入商品编号"></el-input>
        </el-form-item>
        <el-form-item label=" 状态">
          <el-select v-model="formInline.status">
            <el-option
              v-for="item in statusOption "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="datePicker">
            <el-date-picker
              v-model="formInline.beginTime"
              type="datetime"
              placeholder="选择开始日期时间">
            </el-date-picker>
            <div class='dateStyle'>-</div>
            <el-date-picker
              v-model="formInline.endTime"
              type="datetime"
              placeholder="选择结束日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div class="buttonStyle">
        <el-button type="primary" size="mini" @click="productsInsert">新建</el-button>
        <el-button type="primary" size="mini" @click="handleIssue">发布</el-button>
        <el-button type="primary" size="mini" @click="handleRevoke">撤销</el-button>
        <el-button type="primary" size="mini" @click="handleDetele">删除</el-button>
        <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
        <el-button type="primary" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
      </div>
    </div>

    <div class="tableStyle" style="height: 100vh-190px; overflow-y: auto;">
      <el-table :data="tableData" style="width: 100%"
                :height="tableHeight"
                :max-height="tableHeight"
                @cell-dblclick="handleCellDblClick"
                @selection-change="handleSelectionChange"
                :header-cell-style="{textAlign: 'center',background:'#eeeeee',color:'rgb(68 65 65)',fontFamily:'MicrosoftYaHeiUI', position: 'sticky', top: 0, zIndex: 1 }"
                :cell-style="{ textAlign: 'center' }" row-key="index" highlight-current-row
      >
        <!-- 多选 -->
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column width="20">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '已删除': scope.row.status === 1 ? '已发布' :"正常" }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="code" label="商品编号">
        </el-table-column>
        <el-table-column prop="redeemIntegral" label="兑换积分">
        </el-table-column>
        <el-table-column prop="integralCash" label="积分+现金">

          <template slot-scope="scope">
            {{ scope.row.integral  }} +{{scope.row. money }}
          </template>
        </el-table-column>
        <el-table-column prop="redeemStatus" label="是否限兑">
          <template slot-scope="scope">
            {{ scope.row.redeemStatus === 0 ? '×' : '√' }}
          </template>
        </el-table-column>
        <el-table-column prop="redeemCount" label="限兑数量">
        </el-table-column>
        <el-table-column prop="inventoryCount" label="库存数量">
        </el-table-column>
        <el-table-column prop="popularity" label="人气">
        </el-table-column>
        <el-table-column prop="salesVolume" label="销量">
        </el-table-column>
        <!--        没有这个字段-->
        <el-table-column prop="drawStatus" label="抽奖商品">
          <template slot-scope="scope">
            {{ scope.row.drawStatus === 0 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column prop="drawProbability" label="抽奖概率">
        </el-table-column>
        <el-table-column prop="drawCount" label="最多抽奖数">
        </el-table-column>
        <el-table-column prop="drawIntegral" label="抽奖积分">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[2,5, 10 ]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import {productsPages, productsDelete, productsRevoke, productsIssue} from '@/api/api.js';
  import {sendEcxel} from "@/utils/public";
  import {statusOption} from '@/utils/dictionary.js';
  // import {api_url} from '@/utils/apiUrl'
  export default {
    data() {
      return {
        tableHeight: 'calc(485px )',// 例子中假设头部和其他元素占用200px高度，可以根据实际情况调整
        statusOption:statusOption,
        formInline: {
          endTime: "",
          beginTime: '',
          name: '',
          current: 1,
          size: 10,
          drawStatus: "",
          code: '',
        },
        rulesInline: {},
        total: 1,
        currentPage: 1, // 分页数据
        pageSize: 10,
        tableData: [],
        multipleSelection: [], // 用来存储选中的行
        IssueList: [],
        RevokeList: []
      }
    },
    created() {
      this.getList();
    },
    methods: {
      /*
      * table点击事件，跳转到详情
      * */

        handleCellDblClick(event, row) {
          this.$router.push({
            path: '/productsDetail',
            query: {id: event.id}
          });
      },
      // 多选操作
      handleSelectionChange(selection) {
        this.multipleSelection = selection;
        //正常2，转发布
        this.IssueList = selection.filter(item => item.status === 2).map(item => item.id);
        //删除1，转撤销
        this.RevokeList = selection.filter(item => item.status === 1).map(item => item.id);
      },
      /**新增 */
      productsInsert() {
        this.$router.push('/productsDetail')
      },
// 发布
      handleIssue() {
        if (this.IssueList.length > 0) {
          productsIssue(this.IssueList).then(response => {
            if (response.code === 0) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
              this.getList()
            } else {
              this.$message({
                message: response.msg,
                type: 'warning'
              });
            }

          });
        } else {
          this.$message({
            message: '请选择状态是"正常"的数据',
            type: 'warning'
          });
        }
      },
// 撤销
      handleRevoke() {
        if (this.RevokeList.length > 0) {
          productsRevoke(this.RevokeList).then(response => {
            if (response.code === 0) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
              this.getList()
            } else {
              this.$message({
                message: response.msg,
                type: 'warning'
              });
            }

          });
        } else {
          this.$message({
            message: '请选择状态为"已删除"的数据',
            type: 'warning'
          });
        }
      },
// 删除
      handleDetele() {
        if (this.IssueList.length > 0) {
          productsDelete(this.IssueList).then(response => {
            if (response.code === 0) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
              this.getList()
            } else {
              this.$message({
                message: response.msg,
                type: 'warning'
              });
            }

          });
        } else {
          this.$message({
            message: '请选择状态是"正常"的数据',
            type: 'warning'
          });
        }

      },
      /** 查询 列表 */
      getList() {
        productsPages(this.formInline).then(response => {
          // if(response.total>0){
          if (response.code === 0) {
            // this.tableData = response.records;
            this.tableData = response.data.records;
            this.total = response.data.total;
          } else {
            this.tableData = []
          }
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.formInline.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formInline = {
          current: 1,
          size: 10,
        };
        // this.$refs.postForm.resetFields()
        this.handleQuery();
      },
      // 分页的大小
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
      },
      //
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.tableData, currentPage);
      },
      // 页面改变
      currentChangePage(list, currentPage) {
        this.formInline.current = currentPage
        this.formInline.size = this.pageSize
        this.currentPage = currentPage
        this.getList()
      },
      /*
      *导出按钮
      * */
      handleExport() {
        //  ${process.env.VUE_APP_BASE_API}
                  sendEcxel('/api/products/export', this.formInline).then(res => { 
       //  sendEcxel(`${process.env.VUE_APP_BASE_API}/api/products/export`, this.formInline).then(res => { 
        // sendEcxel(`${api_url}/api/products/export`, this.formInline).then(res => {  //此处请求接口
          const link = document.createElement("a");
          const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          // let name = res.headers['content-disposition']
          let name = res.headers['content-disposition'].split('=')[1]//fileName
          link.setAttribute("download", decodeURI(name));  //报表名称可自定义
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
    },
    computed: {},
  }
</script>

<style lang="less" scoped>
  .buttonStyle {
    margin: 0 40px 0 0;
    display: flex;
    /*justify-content: flex-end;*/
  }

  .searchDiv {
    padding: 20px 10px 10px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .tableStyle {
    padding: 0px 10px;
  }

  .datePicker {
    display: flex;

  }

  .dateStyle {
    margin: 0 5px;
  }
</style>
